<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <tree-tools :nodeData="company" :isShow="false" @addDepts="addDepts"></tree-tools>
        <el-tree :data="list" :props="defaultProps" @node-click="handleNodeClick">
          <tree-tools
            @editDepts="editDepts"
            @addDepts="addDepts"
            slot-scope="{ data }"
            :nodeData="data"
            :isShow="true"
            @delDepts="getDepartments"
          ></tree-tools>
        </el-tree>
      </el-card>
    </div>
    <!-- 新增部门弹出层 -->
    <add-depts
      :id="addId"
      :showDialog="addDialogVisible"
      @addDepts="add"
      :isAdd="isAdd"
      v-if="addDialogVisible"
    ></add-depts>
  </div>
</template>

<script>
import treeTools from "@/components/tree-tools";
import { getDepartments } from "@/api/departments";
import { tranListToTreeData } from "@/utils";
import addDepts from "./components/addDepts";

export default {
  components: {
    treeTools,
    addDepts
  },
  data() {
    return {
      addId: null,
      addDialogVisible: false,
      defaultProps: {
        children: "children",
        label: "name"
      },
      company: {
        name: "江苏传智播客教育科技股份有限公司",
        manager: "负责人"
      },
      list: [],
      isAdd: false
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    async getDepartments() {
      try {
        const data = await getDepartments();
        this.list = tranListToTreeData(data.depts, "");
      } catch (error) {}
    },
    addDepts(e) {
      this.isAdd = true;
      this.addId = e;
      this.addDialogVisible = true;
    },
    add() {
      this.addDialogVisible = false;
      this.getDepartments();
    },
    editDepts(e) {
      this.isAdd = false;
      this.addId = e;
      this.addDialogVisible = true;
    }
  },
  created() {
    this.getDepartments();
  }
};
</script>

<style>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>
